<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
        <meta content="telephone=no" name="format-detection" />
        <title>佣金提现</title>
        <link href="{{asset('/mobile/css/style.css')}}" rel="stylesheet" type="text/css">
    </head>
    <style type="text/css">
        body{
            background-color: #FFFFFF;
        }
        input{
            border: none;
            outline: none;
            font-size: 1rem;
        }
        .mine{
            box-sizing: border-box;
            padding: 0.8rem 1rem;
            overflow: hidden;
            margin-bottom: 10px;
            background-color: #FFFFFF;
        }
        .mine-left{
            float: left;
        }
        .mine-right{
            float: right;
            color: #D74B2D;
        }
        .mine-icon{
            float: left;
            height: 1rem;
            margin-right: 5px;
        }
        .tanhao{
            width: 6rem;
            height: 6rem;
            line-height: 6rem;
            border-radius: 50%;
            background-color: #E8A38C;
            margin: 10% auto 10%;
            text-align: center;
        }
        .tanhao-img{
            height: 60%;
            margin-top: 20%;
        }
        .big1{
            font-size: 1.2rem;
            text-align: center;
            margin-bottom: 10px;
        }
        .big2{
            text-align: center;
            font-size: 2rem;
        }
        .con{
            width: 90%;
            margin: 20px auto;
        }
        .li{
            display: flex;
            border-bottom: 1px solid #EEEEEE;
            box-sizing: border-box;
            padding: 10px;
            position: relative;
        }
        .title{
            flex: 0 0 30%;
            text-align: justify;
            height: 1rem;
            line-height: 1rem;
            overflow: hidden;
            font-size: 1rem;
            padding-top: 2px;
        }
        .title:after{
            content: '';
            display: inline-block;
            width: 100%;
        }
        .inp{
            flex: 0 0 60%;
        }
        .mao{
            margin: 0 10px;
        }
        .btn-yzm{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            right: 0;
            background-color: #D9543B;
            color: #FFFFFF;
            font-size: 0.8rem;
            padding: 8px;
            border-radius: 5px;
            width: 4rem;
            text-align: center;
        }
        .btn-yzm.active{
            background-color: #aaaaaa;
        }
        .btn-big{
            text-align: center;
            background-color: #D9543B;
            border-radius: 5px;
            font-size: 1.1rem;
            padding: 0.7rem 0;
            color: #F9EAE7;
            width: 90%;
            margin: 40px auto 0;
        }
        
    </style>
    <body>
        <div class="mine">
            <img class="mine-icon" src="{{asset('/imgs/yue.png')}}"/>
            <div class="mine-left">佣金余额</div>
            <div class="mine-right">¥{{$agent->money}}</div>
        </div>
        <div class="tanhao">
            <img class="tanhao-img" src="{{asset('/imgs/qianbao.png')}}"/>
        </div>
        <div class="big1">可提现</div>
        <div class="big2 amount">{{$agent->money}}</div>
        <div class="con">
            <div class="li">
                <div class="title">预留手机</div><span class="mao">:</span>
                <input id="phone" class="inp" name="mobile" readonly type="number" placeholder="输入手机号" value="{{$agent->mobile}}"/>
            </div>
            <div class="li">
                <div class="title">提现金额</div><span class="mao">:</span>
                <input id="bz" class="inp" type="text" placeholder="输入金额" name="money"/>
            </div>
            <div class="li">
                <div class="title">验证码</div><span class="mao">:</span>
                <input id="yzm" class="inp" name="code" type="text" placeholder="输入验证码" />
                <div id="btnYzm" class="btn-yzm btn-code">获取验证码</div>
            </div>
            <div class="li">
                <div class="title">备注说明</div><span class="mao">:</span>
                <input id="bz" class="inp" name="remark" type="text" placeholder="输入备注" />
            </div>
        </div>
        <div id="go" class="btn-big">提交申请</div>
        <div style="text-align:center;font-weight:bold;font-size:13px">
        <span id="err_msg" style="color:red;">
            @if ($errors->any())          
              {{ $errors->first() }}
            @endif
        </span>
    </div>
    <script type="text/javascript" src="{{asset('/mobile/js/jquery-1.8.3.min.js')}}"></script>
    <script type="text/javascript">
        var clock = '',
        nums =60,
        tn
        amount = $(".amount").text();

        $(".btn-code").click(function(){
            var mobile = "{{$agent->mobile}}";
            if (!mobile) {
                $('#err_msg').text("手机号不能为空");
                return false;
            }
            var myreg = /^[1][3,4,5,7,8][0-9]{9}$/
            if(!myreg.test(mobile)) 
            { 
                $('#err_msg').text('手机号格式错误!');
                return false; 
            } 
            $.ajax({
                type: "get",
                dataType: "json",
                url: '/mobile/cash_code',
                data: {
                    mobile: mobile
                },
                success: function (data) {
                    if (data.flag) {
                        sendCode();
                    } else {
                        $('#err_msg').text(data.message);
                    }
                }
            }); 
        });

        function sendCode()
        {
            btn = $('.btn-code');
            btn.unbind('click');
            $(btn).css({"background-color":"#ccc"});
            $(btn).text(nums+'秒重新获取')
            clock = setInterval(doLoop, 1000); //一秒执行一次
        }

        function doLoop(){
            nums--;
            if(nums > 0){
                $(btn).text(nums+'秒重新获取')
            }else{
                clearInterval(clock); //清除js定时器
                btn.disabled = false;
                $(btn).text('获取验证码');
                    //btn.value = '点击发送验证码';
                $(btn).css({"background-color":"#D9543B"});
                nums = 60; //重置时间
                $(".btn-code").click(function(){
                    sendCode();
                });
            }
        }

        $('#go').click(function(){
            $('#err_msg').text("");
            var code = $("input[name=code]").val();
            if (!code) {
                $('#err_msg').text("请填写手机验证码!");
                return false;
            }
            var money = $("input[name=money]").val();
            if (!money) {
                $('#err_msg').text("请填写提现金额!");
                return false;
            }
            if (money < 100) {
                $('#err_msg').text("提现金额不能少于100!");
                return false;
            }
            if (money > amount) {
                $('#err_msg').text("余额不足!");
                return false;
            }
            var remark = $("input[name=remark]").val();
            var mobile = "{{$agent->mobile}}";
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "/mobile/agent/withdraw/{{$agent->id}}",
                data: {
                    money: money,
                    mobile: mobile,
                    code: code,
                    remark: remark,
                    _token: "{{ csrf_token() }}"
                },
                success: function (data) {
                    if (data.flag) {
                        window.location.href = "/mobile/agent/my_cash/{{$agent->id}}";
                    } else {
                        $("#err_msg").text(data.msg);
                    }
                }
            }); 
        });
    </script>
    </body>
</html>
